<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta http-equiv="Pragma" content="no-cache" >
<meta http-equiv="Cache-Control" content="no-cache" >
<meta http-equiv="Expires" content="-1" >

<link rel="shortcut icon" href="/icon/info.niwota.home">
<title>Home</title>
<base href="/content/info.niwota.home/" target="_self" >

<link rel="stylesheet" href="/assets/style/common.css" type="text/css">

<style type="text/css">
.wrapper { 
	margin-top: 32px;
	margin-bottom: auto;
	margin-left: 32px;
	margin-right: 32px;
	width: 800px; 
	text-align: left; 
	border: none; 
	clear: both;
}

.cell {
  margin: 2px;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}

.cell img {
  display: inline;
  width: 32px;
  height: 32px;  
  margin: 0px;
  padding: 0px;
  border: none;
}

.cell:hover {
	background-color: orange;
}

.caption {
  text-align: center;
  font-weight: bold;
  width: 100px;
  color: #fff;
  margin: 2px;
}

.breadcrumb {
}

.stats {
	color: #fff;
}


#list {
	padding: 0;
	margin: 0;
	width: auto;
	clear: both;
}

#list li {
	list-style-type:none;
	margin: 0 0 10px 0;
}

#list a, #list a:visited {
	display: inline;
	text-align: left;
	text-decoration: none; 
}

#list a:hover { 
	background: orange; 
	color: #fff; 
} 

.thumb32 {
	max-width: 32px;
	max-height: 32px;
	margin: 0;
	padding: 0;
	border: none;
}

</style>

<script type="text/javascript" src="/assets/opt/script/jquery.js"></script>
<script type="text/javascript" src="/assets/opt/ui/tooltip/qtip/jquery.qtip-1.0.0-rc3.js"></script>
<script type="text/javascript" src="/assets/script/common.js"></script>
<script type="text/javascript" src="/content/info.niwota.home/assets/script/custom.js"></script>

<script type="text/javascript">
var spinner = '<img src="/assets/image/spin.gif" alt="Please wait..." ><span style="color: white; font-size: xx-large;">...<blink>.....</blink></span>';
var jsonp = '/content/info.niwota.home/jsonp/jvsfile/listFile?path=';
var view_images = ['view_thumb32.png','view_list32.png','view_fling32.png'];
var view_data = null;

$(document).ready(function(){
	initPage('/');
	//
	$.initOptionMenu();
});

function initPage(path) {
	$('#list').html(spinner);
	var url = jsonp +  encodeURIComponent(path);
	$.get(url, function(d) {
		loadPage(d);
	});
}

function loadPage(data) {
	if (!data) {
		return;
	}
	view_data = data; //cache it
		
	breadcrumb(data);
	formatFolder(data);

	$('#stats').html('Total: ' + data.total + ' (' + data.elapsed + ' ms)');
	var next = (data.view >= 2 ? 0 : data.view + 1);
	var twist = '<a href="#" onclick="changeView('+ next +');"><img src="/assets/image/' + view_images[data.view] + '" style="border: none;" ></a>';
	$('#twister').html(twist);
	
	document.title = data.path;

   	//
   	removeCookie('info.niwota.home.view');
   	setCookie('info.niwota.home.view', data.view, 1);
}

function breadcrumb(d) {
	var s = d.path;
	if (s) {
		var sep = '&raquo;&nbsp;&nbsp;';
		var a = s.substring(1).split('/');
		var bc = $('#breadcrumb');
		bc.empty();
		bc.append('<span><a target="_self" title="Home Fling" onclick="return doList(this);" href="'+ jsonp + '/"><img src="/content/info.niwota.home/res/drawable/home25" >/</a></span>');
		var p = "";
		for (var i = 0; i < a.length; i++) {
			p = p + "/" + a[i];
			bc.append(sep + '<span><a class="action" target="_self" onclick="return doList(this);" href="' + jsonp + encodeURIComponent(p) + '">' + a[i] + '</a></span>');
		}
	}
}

function changeView(v) {
	view_data.view = v;
	//
	loadPage(view_data);
}

function doList(a) {
    $('#stats').empty();
	$('#list').html(spinner);
	var url = a.href + '&view=' + view_data.view;
	$.get(url, function(d) {
		loadPage(d);
	});
	return false;
}

function formatFolder(d) {
	var c = $('#list');
	c.empty();
	if (d.list) {
		var view = d.view;
		var html = '';
		switch(view) {
		case 0:
			html = formatThumb(d);
			break;
		case 1:
			html = formatList(d);
			break;
		case 2:
			html = formatStrip(d);
			break;
		default:
			html = formatThumb(d);
		}
		c.append(html);
	} else {
		c.append('This folder is empty.');
	}
}

function formatList(d) {
	var d =  view_data;
	var dl = d.list;
	var html = '<ul id="list">';
	for(var i = 0; i < dl.length; i++) {
		var name = dl[i].displayName;
		var type = dl[i].type;
		var path = (d.path == '/' ? '/' + dl[i].name : d.path + '/' + dl[i].name) ;
		var icon = (dl[i].icon ? dl[i].icon : $.itemIcon(dl[i]));
		var iconname = '<img class="thumb32" src="' + icon + '" ><span>' + name +'</span>';
		var desc = 'name: ' + name + '\\n type: ' + (type ? type : "") + '\\n path: ' + path;
		
		html += (dl[i].isFile ? 
		    '<li><a tooltip="'+ desc +'" target="_blank" href="/content/info.niwota.home/bin/view?path=' + encodeURIComponent(path) + '&type=' + type + '">' + iconname + '</a></li>' :
		    '<li><a tooltip="'+ desc +'" target="_self" onclick="return doList(this);" href="' + jsonp + encodeURIComponent(path) + '">' + iconname + '</a></li>'
		);
	}
	html += '</ul>';
	return (html);
}

function formatThumb(d) {
	var d =  view_data;
	var dl = d.list;
	var html = '';
	var br = '<br style="clear: both;" />';
	var mpl = 8;
	for(var i = 0; i < dl.length; i++) {
		html += (i % mpl ? '' : br);
		//
		var name = dl[i].displayName;
		var type = dl[i].type;
		var path = (d.path == '/' ? '/' + dl[i].name : d.path + '/' + dl[i].name) ;
		var icon = (dl[i].icon ? dl[i].icon : $.itemIcon(dl[i]));
		var shortname = $.shorten(name, 16);
		var iconname = '<img class="thumb32" src="' + icon + '" ><div class="caption">' + shortname +'</div>';
		var desc = 'name: ' + name + '\\n type: ' + (type ? type : "") + '\\n path: ' + path;
		
		html += (dl[i].isFile ? 
			'<a class="cell" tooltip="'+ desc +'" target="_blank" href="/content/info.niwota.home/bin/view?path=' + encodeURIComponent(path) + '&type=' + type + '">' + iconname + '</a>' :
			'<a class="cell" tooltip="'+ desc +'" target="_self" onclick="return doList(this);" href="' + jsonp + encodeURIComponent(path) + '">' + iconname + '</a>'
		    );
	}
	return (html);
}

function formatStrip(d) {
	var d =  view_data;
	var dl = d.list;
	var html = '<div id="detail_frame">'+formatDetail(0)+'</div>';
	html += '<div id="detail_links">';
	for(var i = 0; i < dl.length; i++) {
		var name = dl[i].displayName;
		var type = dl[i].type;
		var path = (d.path == '/' ? '/' + dl[i].name : d.path + '/' + dl[i].name) ;
		var icon = (dl[i].icon ? dl[i].icon : $.itemIcon(dl[i]));
		var iconname = '<img class="thumb32" src="' + icon + '" ><span>' + name +'</span>';
		var shortname = $.shorten(name, 4);
		html += '<span><a class="action" title="'+name+'" href="'+ path +'" onclick="showDetail('+ i +'); return false;">'+ shortname +'</a></span>';
	}
	html += '</div>';
	return (html);
}

function formatDetail(i) {
	var d =  view_data;
	var dl = d.list;
	var name = dl[i].displayName;
	var size = dl[i].size;
	var type = dl[i].type;
	var date = dl[i].date;
	var path = (d.path == '/' ? '/' + dl[i].name : d.path + '/' + dl[i].name) ;
	var desc = '<div><table><tr><td>Name:</td><td>'
		+ name +'</td></tr><tr><td>Size:</td><td>'
		+ size +'</td></tr><tr><td>Type:</td><td>'
		+ type +'</td></tr><tr><td>Date modified:</td><td>'
		+ date +'</td></tr><tr><td>Path:</td><td>'
		+ path +'</td></tr></table></div>';
	var img = (type.indexOf('image/') == 0 ? '<img src="/content/info.niwota.home/bin/view?path=' + encodeURIComponent(path) + '">' : '');
	var html = '<div>'+ desc +'<div class="detail_image">'+img+'</div></div>';
	return html;
}

function showDetail(i) {
	var html = formatDetail(i);
	$('#detail_frame').html(html);
}

function initTooltip() {
   $('#list a[tooltip]').each(function() {
      $(this).qtip({
         content: formatTip($(this).attr('tooltip')),
	     position: {
	         corner: {
	            target: 'topRight',
	            tooltip: 'bottomLeft'
	         }
	      },
	      style: {
	         name: 'light',
	         padding: '7px 13px',
	         width: {
	            max: 210,
	            min: 0
	         },
	         tip: true
	      }
      });
   });
}

</script>
</head>
<body>

<div id="topnav">
	<span class="breadcrumb" id="breadcrumb">
	</span>
	
	<span class="top-center">
	</span>
	
	<span class="top-right" style="margin-right: 64px;">
	<span class="action"><a class="change-view" href="#" onclick="changeView(0);">Icon</a></span>&nbsp;.&nbsp;
	<span class="action"><a class="change-view" href="#" onclick="changeView(1);">List</a></span>&nbsp;.&nbsp;
	<span class="action"><a class="change-view" href="#" onclick="changeView(2);">Strip</a></span>&nbsp;|&nbsp;
	<span class="action"><a href="#" onclick="self.close();">Quit</a></span>
	</span>
</div>

<!--page content-->
<div id="page-content">

<div style="clear: both;"></div>

<div id="file-content" style="margin-top: 32px;">
<div id="list"></div>
</div>

<div style="clear: both;"></div>

<hr class="separator" />

<div>

<span class="file-indexes" >

<span id="file-index"></span> <span class="stats" id="stats"></span>

</span>

</div>


</div>
<!--//page content-->

<div id="optionmenu">
<a class="change-view" href="#" onclick="changeView(0);" title="Icon" ><img src="/res/drawable/ic_menu_iconview" /></a>
<a class="change-view" href="#" onclick="changeView(1);" title="List" ><img src="/res/drawable/ic_menu_listview" /></a>
<a class="change-view" href="#" onclick="changeView(2);" title="Strip" ><img src="/res/drawable/ic_menu_stripview" /></a>
<a href="#" title="Quit" onclick="self.close();"><img src="/res/drawable/ic_menu_done" /></a>
</div>

<div id="footer">
<span style="color: #fff;">Home Fling 2.0.0 &copy; 2010 All rights reserved</span> 
<span id="twister" class="bottom-right" >
</span>
</div>

<div id="wallpaper" style="display: block;"><img src="/wallpaper" width="100%" height="100%" /></div>

</body>
</html>